import classnames from 'classnames'

import Icon from '@/components/Icon'
import styles from './index.module.scss'
import {useDispatch, useSelector} from "react-redux";
import {differenceBy} from 'lodash'
import {useEffect, useState} from "react";
import {delChannel, getRestChannels, handleAddChannel, updateActiveChannelKey} from "@/store/actions/home";


const arr = [ // 所有频道数据
  {
    id: 1
  },
  {
    id: 2
  },
  {
    id: 3
  }
]
const arr1 = [ // 用户频道数据
  {
    id: 1
  }
]

// console.log(differenceBy(arr, arr1, 'id'))

// 所有频道里面，把用户的频道数据剔除掉

/**
 *
 * @param {function} onClose 关闭弹层的方法
 * @return {JSX.Element}
 * @constructor
 */
const Channels = ({onClose}) => {

  const [isEdit, setIsEdit] = useState(false);
  const changeEditState = () => {
    setIsEdit(!isEdit)
  }

  // 获取redux里面频道数据
  const {userChannel, restChannels, activeChannelKey} = useSelector(state => state.home)
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getRestChannels())
  }, []);


  // 我的频道数据+推荐频道数据=所有频道的数据
  // 我的频道数据 ==> userChannel
  // 所有频道的数据 ==> 可以通过接口获取
  // 推荐频道的数据 ==> 所有频道数据-我的频道的数据

  // 如何从一个数组内部把另一个数组拥有的项剔除掉
  // const all = [1, 2, 3, 4, 5] // 所有频道数据
  // const user = [2, 3] // 我的频道数据
  // // 推荐频道数据 ==> 1,4,5
  // const res = all.filter(item => !user.includes(item))
  // console.log(res)

  const changeActiveChannelKey = (item) => () => {
    // 点击我的频道的回调
    if (!isEdit) {
      dispatch(updateActiveChannelKey(item.id))
      onClose()
      return
    }

    //  处于编辑状态
    //  是否为推荐频道 id = 0
    if (item.id === 0) return;
    //  当前剩余频道数量是否小于等于4
    if (userChannel.length <= 4) return;
    // 可以执行删除频道的操作
    // 派发thunk
    dispatch(delChannel(item))
  }
  const addChannel = item => () => {
    //  添加频道的操作
    //  如果登陆了  添加接口
    //  如果没有登录 添加本地存储
    //  写入redux ==> 界面更新的效果
    dispatch(handleAddChannel(item))
  }
  return (
    <div className={styles.root}>
      <div className="channel-header">
        <Icon type="iconbtn_channel_close" onClick={onClose}/>
      </div>
      <div className="channel-content">
        {/* 编辑时，添加类名 edit */}
        <div className={classnames('channel-item', isEdit && 'edit')}>
          <div className="channel-item-header">
            <span className="channel-item-title">我的频道</span>
            <span className="channel-item-title-extra">点击进入频道</span>
            <span className="channel-item-edit" onClick={changeEditState}>
              {isEdit ? '保存' : '编辑'}
            </span>
          </div>
          <div className="channel-list">
            {/* 选中时，添加类名 selected */}
            {
              userChannel.map(item => (
                <span
                  onClick={changeActiveChannelKey(item)}
                  key={item.id}
                  className={classnames(
                    'channel-list-item',
                    +activeChannelKey === +item.id && 'selected'
                  )}
                >
                  {item.name}
                  <Icon type="iconbtn_tag_close"/>
                </span>
              ))
            }
          </div>
        </div>

        <div className="channel-item">
          <div className="channel-item-header">
            <span className="channel-item-title">频道推荐</span>
            <span className="channel-item-title-extra">点击添加频道</span>
          </div>
          <div className="channel-list">
            {
              restChannels.map(item => (
                <span
                  className="channel-list-item"
                  key={item.id}
                  onClick={addChannel(item)}
                >+ {item.name}</span>
              ))
            }
          </div>
        </div>
      </div>
    </div>
  )
}

export default Channels
